{% extends "employee/employee_base.html"%}
{% block currentPath %}
 >> Products    
{% endblock %}

{% block content %}
    <div id="filter">
        <form name="product-filter" action="" method="get">
        <p>Product name: <input type="text" size=30 name="product-name" /></p>
        <p>Category: 
            <select name="product-category">
                <option value="0">All</option>
                {% for category in cateogries %}
                <option value="{{category.id}}">{{category.name}}</option>
                {% endfor %}
            </select> 
            <a href="/employee/products/category/">[Edit]</a>
           Subcategory: 
            <select name="product-subcategory"></select> 
            <a href="employee/products/category/">[Edit]</a>
            <input type="submit" value="Filter"/></p>
        </form>
    </div>
    <div id="filter-results">
        <p><input type="button" value="+ Add new product" onclick="window.location.href='/employee/products/add/'" /></p>
        <table class="table-list" border=0 cellspacing=0 cellpadding=3 width="700px">
            <tr>
                <th width="40px">ID</th><th width="300px">Product</th><th width="40px">Price</th><th width="100px">Inventory</th><th>Category</th><th>Subcategory</th>
            </tr>
            {% for product in products %}
            <tr>
                <td>{{product.id}}</td>
                <td>
                    <strong>{{product.name}}</strong>
                    <a href="/products/{{product.id}}" target="_blank">[view]</a>
                    <a href="/employee/products/edit/{{product.id}}/">[Edit]</a>
                </td>
                <td>{{product.price}}€</td>
                <td>{{product.inventory_records.available|default:0}}/{{product.inventory_records.total|default:0}} <a href="/employee/products/inventory/{{product.id}}">[Manage]</a></td>
                <td>{{product.subcategory.category.name}}</td>
                <td>{{product.subcategory.name}}</td>
            </tr>
            {% endfor %}
            <tr>
                <td colspan=6 align="right">{% include "page_bar.html" %}</td>
            </tr>
        </table>
    </div>
{% endblock %}

